<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2025-08-22 13:52:23
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-10-29 14:54:18
 * @FilePath: \register-pay-screen\src\components\screenLeftOne.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="screenLeftOne">
        <Title>
            <template #title>
                当前餐次取餐预警等级
            </template>
        </Title>
        <div class="warnBox">
            <div class="infoFlex">
                <div class="level">
                    <span>当前等级：</span>
                    <!-- 1-正常，2-一般，3-异常 -->
                    <span style="color: #1EDCEC;">{{ Number(level) == 1 ? '正常' : Number(level) == 2 ? '一般' : '异常'
                        }}</span>
                </div>
                <div class="type">
                    <div class="one">
                        <span style="background: #1EDCEC;"></span>
                        <span>一般</span>
                    </div>
                    <div class="two">
                        <span style="background: #FAC540;"></span>
                        <span>严重</span>
                    </div>
                    <div class="three">
                        <span style="background: #FA5662;"></span>
                        <span>严重</span>
                    </div>
                </div>
            </div>
            <div class="lineFlex">
                <div class="arrow" :style="'left:' + Number(rate) + '%;'"
                    :class="Number(rate) <= 33.333 ? 'colorBar1' : Number(rate) <= 66.666 ? 'colorBar2' : 'colorBar3'">
                </div>
                <div class="line line1"></div>
                <div class="line line2"></div>
            </div>
        </div>
        <div class="deviceBox" v-if="deviceList.length > 0">
            <div class="nameBox">
                {{ deviceList[activeDeviceIndex].device_name }}
            </div>
            <div class="deviceList">
                <!-- 使用Swiper的on:init事件来获取实例 -->
                <swiper ref="rightSwiperRef" style="width:100%;height:100%;" :slidesPerView="1" :spaceBetween="20"
                    :loop="true" :centeredSlides="true" :pagination="false" :autoplay="true" :speed="1000"
                    :navigation="customNavigation" :modules="modules" :observer="true" :observeParents="true"
                    @slide-change="handleSlideChange"
                    @init="handleSwiperInit">
                    <swiper-slide v-for="(itemk, indexk) in deviceList" :key="indexk">
                        <div class="items">
                            <div class="conteny">
                                <img :src="cpu" alt="">
                                <div class="info">
                                    <div>CPU</div>
                                    <div>{{ itemk.hardware_info ? itemk.hardware_info.cpu : 0 }}%</div>
                                </div>
                            </div>
                        </div>
                        <div class="items">
                            <div class="conteny">
                                <img :src="id" alt="">
                                <div class="info">
                                    <div>读卡器</div>
                                    <div style="color: #FC9A19;">{{ itemk.hardware_info ? itemk.hardware_info.id_card :
                                        0 }}%
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="items">
                            <div class="conteny">
                                <img :src="neicun" alt="">
                                <div class="info">
                                    <div>内存</div>
                                    <div style="color: #FA5662;">{{ itemk.hardware_info ? itemk.hardware_info.memory : 0
                                        }}%
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="items">
                            <div class="conteny">
                                <img :src="renlian" alt="">
                                <div class="info">
                                    <div>人脸模组</div>
                                    <div>{{ itemk.hardware_info ? itemk.hardware_info.face_count : 0 }}%</div>
                                </div>
                            </div>
                        </div>
                        <div class="items">
                            <div class="conteny">
                                <img :src="cipan" alt="">
                                <div class="info">
                                    <div>磁盘</div>
                                    <div>{{ itemk.hardware_info ? itemk.hardware_info.disk : 0 }}%</div>
                                </div>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue"
import { PiniaStore } from '../store/index'
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件
import { Autoplay, Navigation, A11y } from 'swiper'// 分页器
import { ElMessage } from 'element-plus'
import 'swiper/css'
import 'swiper/css/navigation'
import cipan from '../assets/images/cipan.png'
import cpu from '../assets/images/cpu.png'
import id from '../assets/images/id.png'
import neicun from '../assets/images/neicun.png'
import renlian from '../assets/images/renlian.png'
import { deviceInfo } from './Options/Api'
const store = PiniaStore()
// interface PropsType {
//     data?: any
// }
// const props = withDefaults(defineProps<PropsType>(), {
//     data: {}
// })
const modules = [Autoplay, Navigation, A11y]
const customNavigation = ref({
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
})
const level = ref<number | string>('')
const rate = ref<number>(54)
const deviceList = ref<any>([])
// 添加swiper引用
const rightSwiperRef = ref<any>(null)
// 添加当前活动设备的索引
const activeDeviceIndex = ref(0)
const getList = async () => {
    const res: any = await deviceInfo()
    if (res.code !== 1) return ElMessage.error(res.msg)
    return new Promise(async (resolve) => {
        level.value = res.data.level
        deviceList.value = res.data.deviceList
        store.setLoddingStatus()
        resolve(undefined) // 所有操作完成后resolve
    })
}
// 添加一个变量来存储Swiper实例
let swiperInstance:any = null
// 处理Swiper初始化
const handleSwiperInit = (swiper:any) => {
    swiperInstance = swiper
    // 初始化时更新一次活动索引
    if (deviceList.value.length > 0) {
        activeDeviceIndex.value = swiper.realIndex
    }
}
// 修改handleSlideChange函数，使用存储的实例
const handleSlideChange = () => {
    if (deviceList.value.length === 0 || !swiperInstance) {
        return
    }
    // 使用存储的实例获取真实索引
    let realIndex = swiperInstance.realIndex
    // 更新活动设备索引
    activeDeviceIndex.value = realIndex
}

// 修改onMounted，使用nextTick确保DOM已更新
onMounted(async () => {
})
defineExpose({ getList })
</script>
<style scoped lang="scss">
.screenLeftOne {
    height: 524px;
    background: rgba(0, 40, 87, 0.4);

    .warnBox {
        padding: 0 20px;
        margin-bottom: 25px;

        .infoFlex {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 20px 0 36px 0;

            .level {
                font-size: 14px;
                font-weight: bold;
            }
        }

        .type {
            font-size: 14px;
            font-weight: bold;
            color: #FFFFFF;

            div {
                display: inline-block;
                margin-left: 20px;

                span:first-of-type {
                    width: 9px;
                    height: 9px;
                    background: #F99951;
                    border-radius: 50%;
                    display: inline-block;
                    margin-right: 6px;
                }

                span:last-of-type {
                    font-weight: normal;
                }
            }
        }

        .lineFlex {
            height: 14px;
            background: linear-gradient(90deg, #1DCBE1 0%, #04CCF3 22%, #FAC540 39%, #FABB43 61%, #FA5662 100%);
            border-radius: 8px 8px 8px 8px;
            position: relative;

            .arrow {
                position: absolute;
                left: 0%;
                top: -16px;
                width: 0;
                height: 0;
                border-radius: 2px;
                border-left: 8px solid transparent; // 三角形左侧的边框
                border-right: 8px solid transparent; // 三角形右侧的边框
            }

            .arrow.colorBar1 {
                border-top: 14px solid #1EDCEC;
            }

            .arrow.colorBar2 {
                border-top: 14px solid #FAC540;
            }

            .arrow.colorBar3 {
                border-top: 14px solid #FA5662;
            }

            .line {
                position: absolute;
                top: 0;
                width: 2Px;
                height: 14px;
                background: #F8F8FF;
                opacity: 0.4;
            }

            .line1 {
                left: 33.33333%;
            }

            .line2 {
                right: 33.33333%;
            }
        }
    }

    .deviceBox {
        padding: 0 20px;

        .nameBox {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-image: url('@/assets/images/title3.png');
            background-size: 100% 100%;
            font-size: 18px;
            color: #29F1FA;
            text-align: center;
        }

        .deviceList {
            margin-bottom: 27px;
            height: 300px;
            overflow: hidden;
            position: relative;

            .swiper-slide {
                margin-right: 20px;
            }

            .items {
                width: 182px;
                height: 80px;
                margin-top: 20px;
                display: inline-block;
            }

            .conteny {
                width: 100%;
                padding-right: 20px;
                text-align: left;
                margin: auto;
                height: 80px;
                background: #00305A;
                border-radius: 4px;
                margin-bottom: 20px;
                display: inline-flex;
                align-items: center;
                box-sizing: border-box;
                margin-right: 20px;

                img {
                    display: inline-block;
                    width: 55px;
                    height: 55px;
                    margin: 0 14px 0 20px;
                }

                .info {
                    flex: 1;

                    div:first-of-type {
                        font-weight: bold;
                        font-size: 16px;
                        color: #FFFFFF;
                        margin-bottom: 10px;
                    }

                    div:last-of-type {
                        font-size: 18px;
                        font-weight: bold;
                        color: #66FFFF;
                    }
                }
            }

            .items:nth-of-type(2n+1) {
                margin-right: 10px;
            }

            .items:nth-of-type(2n) {
                margin-left: 10px;
            }
        }

    }
}
</style>
